<template>
  <div class="parameter-manager">

    <!--参数管理tabs-->
    <el-tabs v-model="activeName" class="parameter-manager">
      <el-tab-pane label="参数管理" name="list">
        <div>

          <!--参数管理条件-->
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="参数名:">
              <el-input placeholder="参数名" v-model="ParamList.parameter.name"></el-input>
            </el-form-item>
            <el-form-item label="类型:">
              <el-select placeholder="类型" v-model="ParamList.parameter.type">
                <el-option label="constant" value="constant"></el-option>
                <el-option label="sql" value="sql"></el-option>
                <el-option label="interface" value="interface"></el-option>
                <el-option label="reflect" value="reflect"></el-option>
                <el-option label="case" value="case"></el-option>
                <el-option label="wait" value="wait"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否全局:">
              <el-select placeholder="是否全局" v-model="ParamList.parameter.global">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" size="medium" icon="el-icon-search" @click.prevent="getParameterList(projectId,ParamList.parameter.name,ParamList.parameter.type,ParamList.parameter.global,ParamList.parameter.pageIndex,ParamList.parameter.pageSize)">查询</el-button>
              <addParameter v-on:getParameterList="getParameterList" ref="addParameter"></addParameter>
            </el-form-item>
          </el-form>
          <!--参数列表展示-->
          <el-table :data="ParamList.list" border :stripe="true" style="width: 100%" :header-cell-style="{'background-color':'#f2f2f2','font-weight':'bold','color':'#272626','heigth':'39px'}">
            <el-table-column sortable min-width="80" label="编号" prop="id" :show-overflow-tooltip="true" fixed></el-table-column>
            <el-table-column sortable min-width="180" label="参数名" prop="name" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column sortable min-width="250" label="参数值" prop="value" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column sortable min-width="200" label="参数来源" prop="service" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column sortable min-width="200" label="相关用例" rop="domain" style="color: #20a0ff" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column min-width="180" label="描述" prop="message" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column sortable min-width="180" label="更新时间" :show-overflow-tooltip="true">
              <template slot-scope="scope"> <i class="el-icon-time" style="margin-right: 5px"></i>{{scope.row.updateTime | format}}</template>
            </el-table-column>
            <el-table-column min-width="120" label="操作" :show-overflow-tooltip="true" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" class="case-manager-button" size="mini" @click.prevent="editParameter(scope.row.id)">编辑</el-button>
                <el-button type="text" class="case-manager-button" size="mini" style="color:red" @click.prevent="deleteParameter(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div style="margin-top: 50px;float: right">

            <el-pagination background layout="total,sizes,prev, pager, next,jumper" :page-sizes="[30,60, 90, 120]" :page-size="ParamList.parameter.pageSize" @prev-click="prevClickChange" @next-click="nextClickChange" :current-page.sync="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="ParamList.parameter.count">
            </el-pagination>

          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>


<script>
import addParameter from './addParameters'
import { getParameters, addParameters, deleteParameters, updateParameters } from '@/api/parameters'
export default {
  data () {
    return {

      activeName: 'list',

      currentPage: 1,

      ParamList: {
        list: [],
        parameter: {

        }

      }

    }
  },

  components: {
    addParameter
  },

  methods: {


    //获取参数列表
    getParameterList () { },

    //编辑参数
    editParameter () { },

    //删除参数
    deleteParameter () { },

    //添加参数
    addParameter () { },


    //上一页
    prevClickChange () { },

    //下一页
    nextClickChange () { },

    //页大小变化
    handleSizeChange () { },

    //当前页
    handleCurrentChange () { },

  }
}
</script>


<style scoped>
.parameter-manager {
  background-color: white;
  height: 100%;
  margin-top: 2px;
}
</style>